<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Paging</title>

    <style>
        *{
            margin:0;
            padding:0;
        }
        #container{
            width: 960px;
            height: 300px;
            border: 1px solid #e74f4d;
            text-align: center;
            margin: 20px auto;
        }
        a{
            margin: 8px;
            color: blue;
        }
    </style>
</head>
<body>
    <div id="container">
    </div>

    <script>
        window.onload = function () {
            paging({
                id: 'container',
                nowIndex :4,
                sumCount : 9

            })
        };

        function paging(opt) {

            if(!opt.id){
                return false;
            }

            var container = document.getElementById(opt.id);
            var nowIndex = opt.nowIndex || 1;
            var sumCount = opt.sumCount || 5;

            var i, tempA;

            //首页按钮
            if(nowIndex >=4 && sumCount >=6){
                tempA = document.createElement('a');
                tempA.href = '#' + 1;
                tempA.innerHTML = '首页';
                container.appendChild(tempA);
            }

            //上一页
            if(nowIndex >= 2){
                tempA = document.createElement('a');
                tempA.href = '#' + (nowIndex -1);
                tempA.innerHTML = '上一页';
                container.appendChild(tempA);
            }

            //页数小于等于5
            if(sumCount <= 5){
                for(i = 1; i<=sumCount; i++){
                    tempA = document.createElement('a');
                    tempA.href = '#' + i;

                    if(nowIndex == i){
                        tempA.innerHTML = i;
                    }else{
                        tempA.innerHTML = '[' + i + ']';
                    }
                    container.appendChild(tempA);
                }

            }else{ //页数大于5
                for(i = 1; i<=5; i++){

                    //总页数大于5,当前处在第一或第二页
                    if(nowIndex == 1 || nowIndex == 2){
                        tempA = document.createElement('a');
                        tempA.href = '#' + i;

                        if(nowIndex == i){
                            tempA.innerHTML = i;
                        }else{
                            tempA.innerHTML = '[' + i + ']';
                        }
                        container.appendChild(tempA);

                        //总页数大于5，当前处于最后两页之一
                    }else if((sumCount - nowIndex) == 0 || (sumCount -nowIndex) == 1){
                        tempA = document.createElement('a');
                        tempA.href = '#' + (sumCount -5 +i);

                        if((sumCount-nowIndex) == 0 && i==5){
                            tempA.innerHTML = (sumCount-5 +i);
                        }else if((sumCount-nowIndex) == 1 && i==4){
                            tempA.innerHTML = (sumCount -5 +i);
                        }else{
                            tempA.innerHTML = '[' + (sumCount -5 +i) + ']';
                        }
                        container.appendChild(tempA);

                    }else{
                        tempA = document.createElement('a');
                        tempA.href = '#' + (nowIndex -3+i);
                        if(i==3){
                            tempA.innerHTML = (nowIndex -3+i);
                        }else{
                            tempA.innerHTML = '[' + (nowIndex -3+i) +']';
                        }
                        container.appendChild(tempA);
                    }

                }
            }

            //下一页
            if((sumCount -nowIndex) >= 1){
                tempA = document.createElement('a');
                tempA.href = '#' + (nowIndex +1);
                tempA.innerHTML = '下一页';
                container.appendChild(tempA);
            }

            //尾页
            if((sumCount - nowIndex) >=3 && sumCount >=6){
                tempA = document.createElement('a');
                tempA.href = '#' + (sumCount);
                tempA.innerHTML = '尾页';
                container.appendChild(tempA);
            }

            var list = container.getElementsByTagName('a');
            for(i = 0; i<list.length; i++){
                list[i].onclick = function () {
                    container.innerHTML = '';
                    paging({
                       id :'container',
                        nowIndex : parseInt(this.getAttribute('href').substring(1)),
                        sumCount : sumCount
                    });
                }
            }
        }
    </script>
</body>
</html>